﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
    <script>
        $(document).ready(function () {

            //this would be done in a common script file if you are going to
            //make a lot of these calls
            $.ajaxSetup({ type: 'POST', dataType: 'json', contentType: 'application/json', data: {} });

            $('#btn').click(function () {
                //call the web service with the button is clicked
                $.ajax({ url: './Service.asmx/SayIt',
                    data: '{ "name": "Corey" }', //ensure the data is enclosed in a quote
                    success: function (data) {
                        var responseJson = data.d; //the real json is wrapped, get it and parse it
                        $('#sayit').html(responseJson.Name + ' aka ' + responseJson.NickName); //put the response value from the return json
                    },
                    error: function (req, status, error) {
                        alert("error=" + req + ", " + status + ", " + error);
                    },
                    complete: function (req, status) {
                        alert("complete=" + req + ", " + status);
                    }

                });

                //return false to avoid a postback
                return false;
            });


            $("#callAjax").click(function(event)
            {

                     var webMethod = "./Service.asmx/GetLogin"; 
                     var parameters ="{ 'sUsername': '" + $("#name").val() + "', 'sPassword': '" + $("#clave").val() + "'}";
      
        
                       $.ajax({  
                           type: "POST",  
                           url: webMethod,  
                           data: parameters,  
                           contentType: "application/json; charset=utf-8",  
                           dataType: "json",  
                           success: function(msg) {  
                               AjaxSucceeded(msg);  
                           },  
                           error: AjaxFailed  
                       });  
              });  
               

        });


        function AjaxSucceeded(data, status) 
        {
            alert(data.d);

        }
        function AjaxFailed(xmlRequest) 
        {

            alert(' Info Error \n\r ' +
                        xmlRequest.status + ' \n\r ' +
                        xmlRequest.statusText + '\n\r' +
                        xmlRequest.responseText);

        }
        
    </script>
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1> Login</h1>
    </div>
    <div data-role="content">
	   <div data-role="fieldcontain">
			<label for="name">Usuario:</label>
			<input type="text" name="name" id="name" value=""  />
		</div>
       <div data-role="fieldcontain">
			<label for="clave">Clave:</label>
			<input type="text" name="clave" id="clave" value=""  />
			<input id="callAjax" type="button" value="Call Ajax 1" />
		</div>
		
        <div id="resultLog"></div>
		<div>
			<button id='btn'>Load It</button>
			<div id='sayit'></div>
		</div>
    </div>
  </div>
</body>
</html>
